<!-- 主页 -->
<template>
  <div class="monthly">
    <!-- 条件搜索 -->
    <div class="report">
      <i class="iconfont">&#xe644;</i>
      <p class="dashboard">仪表盘</p>
      <!-- 条件查询 -->
      <div class="report-query">
        <el-input
          v-model="input"
          placeholder="请输入内容"
          style="width:100px; margin-right: 10px;"
          size="mini"
        ></el-input>
        <el-button type="primary" icon="el-icon-search" size="mini">查询</el-button>
      </div>
    </div>
    <!-- 折线图 -->
    <div style="width:96%; height:300px;margin-left: 2%;" id="monthly-report"></div>
  </div>
</template>

<script>
export default {
  name: "dashboard",
  components: {},
  data() {
    return {};
  },
  props: {},
  computed: {},
  methods: {},
  watch: {},
  created() {},
  mounted() {
    var echarts = require("echarts");
    var myChart = echarts.init(document.getElementById("monthly-report"));
    var option = {
      title: {
        text: "周度报告"
      },
      tooltip: {
        trigger: "axis"
      },
      legend: {
        data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"]
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true
      },
      xAxis: [
        {
          type: "category",
          boundaryGap: false,
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
        }
      ],
      yAxis: [
        {
          type: "value"
        }
      ],
      series: [
        {
          name: "邮件营销",
          type: "line",
          stack: "总量",
          areaStyle: { normal: {} },
          data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
          name: "联盟广告",
          type: "line",
          stack: "总量",
          areaStyle: { normal: {} },
          data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
          name: "视频广告",
          type: "line",
          stack: "总量",
          areaStyle: { normal: {} },
          data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
          name: "直接访问",
          type: "line",
          stack: "总量",
          areaStyle: { normal: {} },
          data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
          name: "搜索引擎",
          type: "line",
          stack: "总量",
          label: {
            normal: {
              show: true,
              position: "top"
            }
          },
          areaStyle: { normal: {} },
          data: [820, 932, 901, 934, 1290, 1330, 1320]
        }
      ]
    };
    myChart.setOption(option);
  }
};
</script>

<style scoped>
.monthly {
  margin-top: 20px;
}
.report {
  position: relative;
  height: 30px;
  display: flex;
  padding-left: 10px;
  padding-bottom: 10px;
  padding-top: 10px;
  align-items: center;
  border-bottom: 1px solid #eeeeee;
}
.dashboard {
  font-size: 14px;
  font-weight: bold;
  margin-left: 5px;
}
.report-query {
  display: flex;
  position: absolute;
  right: 20px;
  top: 10px;
}
</style>